<%--
  Created by IntelliJ IDEA.
  User: zx
  Date: 2017/10/7
  Time: 22:29
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>登录</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <!-- 引入bootstrap -->
    <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 初始化CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/login/reset.css"/>
    <!-- 引入验证码样式 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/login/drag.css"/>
    <!-- 引入动态背景-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/login/supersized.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/login/style.css"/>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/common/html5shiv.js"></script>
    <![endif]-->
    <style>
        canvas {
            position: fixed;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body id="body">

<div class="col-md-3 col-md-offset-4" style="padding-top: 10%">
    <h1>Login</h1>
    <form id="_form" action="" method="post">
        用户名：<input type="text" name="account" id="username" placeholder="Account">
        密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="password" placeholder="Password">
        <div id="drag" style="margin-top: 15px;margin-left: 10px;"></div>
        <div style="text-align: left; margin-left: 25px;margin-top:15px;">
            <label><input type="checkbox" checked="checked" id="rememberMe"
                          style="width: 15px; height: 15px;margin-right: 6px;">下次自动登录</label>
        </div>

        <button type="button" id="login">登录</button>
        <button type="button" id="register" class="register">Register</button>

        <div class="error"><span>+</span></div>
    </form>
</div>

</body>
<script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/common/drag.js"></script>
<script src="${pageContext.request.contextPath}/static/js/common/MD5.js"></script>
<script src="${pageContext.request.contextPath}/static/js/common/supersized.3.2.7.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/common/supersized-init.js"></script>
<script src="${pageContext.request.contextPath}/static/js/common/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/static/js/canvas-nest.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    var BACK_URL = "${param.backurl}";
    //页面加载函数
    $(function () {
        //验证码
        $('#drag').drag();

    })

    //点击登录按钮
    $("#login").click(function () {
        login();
    });
    //回车事件
    $('#username, #password').keypress(function (event) {
        if (13 == event.keyCode) {
            login();
        }
    });

    function login() {
        var username = $("#username").val();
        var password = $("#password").val();
        var vertificateText = $(".drag_text").text();
        var rememberMe = $("#rememberMe").is(":checked");
        var url = "${pageContext.request.contextPath }/emp/login.do";
        if(username == '') {
            $('.error').fadeOut('fast', function(){
                $('.error').css('top', '27px').show();
            });
            $('.error').fadeIn('fast', function(){
                $('.username').focus();
            });
            return false;
        }
        if(password == '') {
            $('.error').fadeOut('fast', function(){
                $('.error').css('top', '96px').show();
            });
            $(this).find('.error').fadeIn('fast', function(){
                $('.password').focus();
            });
            return false;
        }
        if(vertificateText=='拖动滑块验证'){

            $('.error').fadeOut('fast', function(){
                $('.error').css('top', '150px').show();
            });
            $('.error').fadeIn('fast', function(){
                $("#drag").focus();
            });
            return false;
        }
        $.ajax({
            type: 'POST',
            url: url,
            data: {
                username: username,
                password: password,
                rememberMe: rememberMe,
                backurl: BACK_URL
            },
            beforeSend: function (xmlHttp) {
                xmlHttp.setRequestHeader("If-Modified-Since", "0");
                xmlHttp.setRequestHeader("Cache-Control", "no-cache");
            },
            success: function (resultJson) {
                var obj = eval(resultJson);
                var tr, tbody = $("<tbody>");
                $.each(obj, function (id, item) {
                    var name = item.userName;
                    tr = $("<tr><td width='30'><input type='checkbox' value='" + item.userId + "' name='ids'></td><td>" + name + "</td></tr>");
                    tr[0].obj = item;
                    tbody.append(tr[0]);
                });
                $(".bindThirdUserTbody").append(tbody.children());
            },
            error: function (error) {
                console.log(error);
            }
        })


    }
</script>
</html>

